{% extends 'base.html' %}
{% load static %}
{% block title %}工资条管理 - 首页{% endblock %}
{% block content %}
<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body table-responsive p1">
                    <table id="sent" class="table table-bordered table-striped">
                        <thead>
                            <tr style="text-align: center;vertical-align: middle">
                                <th>序号</th>
                                <th>发送批次</th>
                                <th>合计数据行</th>
                                <th>有效数据行</th>
                                <th>忽略数据行</th>
                                <th>发送时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for info in data %}
                            <tr style="text-align: center;vertical-align: middle">
                                <td>{{ forloop.counter }}</td>
                                <td><a href="{% url 'payroll:single_his' %}?mark_id={{ info.mark_id }}">{{ info.name }}</a></td>
                                <td>{{ info.total }}</td>
                                <td>{{ info.valid_total }}</td>
                                <td>{{ info.ignore_total }}</td>
                                <td>{{ info.time }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
{% block custom_js %}
       <!--Datables-->
   <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
{% endblock %}
<script>
  $(function () {
    $("#sent").DataTable({
        "responsive": true,  //适配手机端表格滚动，需设置为false
        "autoWidth": true,  //固定宽度
        "paging": true,    //允许分页
        "searching": true,   //允许内容搜索
        "lengthChange": true,  //允许改变每页显示的行数
        "ordering": true,      //允许排序
        "info": true,        //显示信息
        "oLanguage":{  //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "后一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列",
        }
      }
    });
  });
</script>
{% endblock %}
